<template>
  <div class="lp-choose-btn" v-if="show">
    <div class="ht">{{title}}</div>
    <ul class="content">
      <li v-for="(item, index) in list" :key="'key-item-'+index">
        <span @click="choose(index)">{{item}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['show', 'list', 'title'],
  methods: {
    choose (i) {
      this.$emit('recall', i)
    }
  }
}
</script>
<style lang="scss">
.lp-choose-btn {
  width: 1200px;
  padding: 50px 0;
  text-align: center;
  margin: 0 auto;
  min-height: 100vh;
  .ht {
    font-size: 36px;
    margin-bottom: 40px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    li {
      width: 50%;
      span {
        display: block;
        height: 90px;
        border-radius: 6px;
        margin: 0 10px 20px;
        background: #fff;
        border: solid 1px #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 28px;
      }
    }
  }
}
</style>
